<script setup>
import Tabbarstudent from "../../pages/componentstudent/Tabbarstudent.vue";
import { ref } from "vue";
// 定义响应式变量
const batchValid = ref(true);
const healthValid = ref(true);
const locationValid = ref(false);
const locationText = ref("未获取位置"); // 新增 locationText 响应式变量
const getLocation = () => {
  console.log("=== 点击了【获取当前位置】按钮，开始模拟定位 ===");
  locationText.value = "中国山西省太原市尖草坪区中北大学";
  locationValid.value = true; // 勾选位置条件

  console.log("模拟定位完成，当前位置：", locationText.value);
  console.log("位置条件是否勾选：", locationValid.value);
};

// 注册方法
const register = () => {
  console.log("注册按钮点击，所有条件均满足");
  // 跳转到注册成功页面
  uni.navigateTo({
    url:'zhuce_ success'// 注册成功页面的路径
  });
};
</script>

<template>
  <view>
    <view id="zhuce">
      <text class="title">报到注册</text><br>
      <text class="content">根据学校疫情防控工作相关安排，本次采用网上电子注册。</text><br>
      <text class="content">以下条件均满足，才可进行报到注册。</text>
      <!-- 条件列表 -->
      <view class="condition-item">
        <checkbox :checked="batchValid" @change="batchValid = !batchValid" />
        <text>返校批次符合学校规定</text>
      </view>
      <view class="condition-item">
        <checkbox :checked="healthValid" @change="healthValid = !healthValid" />
        <text>健康状况符合到校标准</text>
      </view>
      <view class="condition-item">
        <checkbox :checked="locationValid" @change="locationValid = !locationValid" />
        <text>已返回学校：{{ locationText }}</text>
        <!-- 报到注册按钮（条件全满足才可用） -->
      </view>
      <!-- 按钮区域 -->
      <view class="buttons-area">
        <!-- 第一行按钮 -->
        <button type="primary" @click="getLocation">获取当前位置</button>
        <!-- 第二行按钮-->
        <view class="second-btn-wrapper">
          <button
              type="primary"
              :disabled="!batchValid || !healthValid || !locationValid"
              @click="register"
          >
            报到注册
          </button>
      </view>
    </view>
  </view>
    <Tabbarstudent :cur-index="3"></Tabbarstudent>
  </view>
</template>

<style scoped>
#zhuce {
  width: 100%;
  height: calc(100% - 50px);
  background-color: #F0F3FA;
}
.title {
  font-size: 18px;
  font-weight: bold;
  display: block;
}

.content {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  color: #666;
}
.condition-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  height: 20px;
}
.condition-item  {
  margin-right: 8px;
}
.buttons-area button {
  width:80%;
  margin-bottom: 12px;
  padding: 12px 0;
}
uni-view
{
  height:100%
}
</style>